<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../script/vue.js"></script>
    <script src="../script/jquery-2.0.2.js"></script>

    <title>Title</title>
</head>
<body>
<h1>
     vue 钩子函数的生命周期

     <div id="app">
         {{message}}
     </div>


  <script>
          var  apps = new Vue({
              el:"#app",
              data:{
                  message:"hello wo123rld"
              },
              beforeCreate:function () {
                  console.info("beforeCreate!")
              },
              created:function () {
                  console.info("create!")
              },
              beforeMount:function () {
                  console.info(this.$el)
                  console.info("beforeMount!")
              },
              mounted:function () {
                  console.info(this.$el)
                  console.info("mounted")
              },
              beforeDestory:function () {
                  console.info("beforeDestory")
              },
              beforeUpdate:function () {
                  //数据发生改变时 还未渲染前
                  console.info("beforeUpdate")
              },
              updated:function () {
                  console.info("updated")
              }
          })

  </script>
</h1>
</body>
</html>